<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度知道</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<!--页面头部，包含登录和搜索框-->
<header class="clearfix">
    <!--登录框-->
    <div class="login">
        <a href="#">登录</a><a href="#">注册</a><a href="#"><img src="images/ico_01.gif" alt=""></a><a class="nobordr"
                                                                                                   href="#">百度首页</a>
    </div>
    <!--搜索框-->
    <div class="center">
        <a href="#"><img class="logo" src="images/logo.gif" alt="百度知道"></a>
        <!--搜索框的表单-->
        <div class="searchBox">
            <p>
                <a href="#">新闻</a>
                <a href="#">网页</a>
                <a href="#">贴吧</a>
                <a href="#">
                    <strong>知道</strong>
                </a>
                <a href="#">音乐</a>
                <a href="#">图片</a>
                <a href="#">视频</a>
                <a href="#">地图</a>
                <a href="#">百科</a>
                <a href="#">文库</a>
                <a href="#">经验</a>
            </p>
            <div>
                <input class="text" type="text" value="" placeholder="请输入搜索内容">
                <input class="btn" type="button" value="搜索答案">
                <a class="ask" href="#">我要提问</a>ª
            </div>
        </div>
    </div>
</header>
<!--导航栏-->
<nav>
    <!--居中显示-->
    <div class="center">
        <!--左侧导航栏-->
        <ul>
            <li><a href="#" class="active">首页</a></li>
            <li><a href="#">问题</a></li>
            <li><a href="#">专栏</a></li>
            <li><a href="#">用户</a></li>
            <li><a href="#">特色</a></li>
        </ul>
        <!--右侧导航栏-->
        <div>
            <a href="#" class="phone">手机版</a><a href="#">我的问题</a>
        </div>
    </div>
</nav>
<!--首页banner部分-->
<section id="banner">
    <!--banner图片部分-->
    <div class="center">
        <!--透明标题部分-->
        <div class="title">
            <h2><a href="#">为什么人们看到的颜色差别那么大？</a></h2>
            <span><a href="#">来自：《大科技》杂志</a></span>
        </div>
        <!--三个横排的列表项-->
        <ul>
            <li>
                <a href="#"><img src="images/img_01.jpg"/></a>
                <p><a href="#">模拟火星生存是一种怎样的体验？</a></p>
            </li>
            <li>
                <a href="#"><img src="images/img_02.jpg"/></a>
                <p><a href="#">为什么人人都爱八卦？</a></p>
            </li>
            <li>
                <a href="#"><img src="images/img_03.jpg"/></a>
                <p><a href="#">中国人为什么特别喜欢穿黑色西装？</a></p>
            </li>
        </ul>
        <!--右侧-->
        <div class="solgin">
            <!--最上层-->
            <div class="subTitle clearfix">
                <h3>百度知道</h3>
                <a href="#"><img src="images/ico_04.gif"/></a>
            </div>
            <!--中间部分-->
            <p class="text">总有一个人知道<br/>你问题的答案</p>
            <p class="number">解决<span>413,283,081</span>个问题</p>
            <p class="know"><a href="#">知道需知</a></p>
            <!--最下层部分-->
            <div class="subNav">
                <a href="#">我要提问</a>
                <a href="#" class="answer">我来回答</a>
            </div>
        </div>
    </div>
</section>
<!--fist 热门部分-->
<section id="fist" class="clearfix">
    <!--内容区域居中-->
    <div class="center">
        <!--第一部分-->
        <div class="heat">
            <!--标题部分-->
            <h4><img src="images/img_04.gif" alt=""></h4>
            <!--图片部分-->
            <div class="img">
                <!--TODO 在不设置img的高度的时候，会出现一个7px的阴影-->
                <a href="#"><img src="images/img_04.jpg" alt=""></a>
                <a href="#" class="title">关于人性的心理如何去看待</a>
            </div>
            <ul>
                <li><a href="#">如何看待大学生宿舍频频被内衣贼光顾？</a></li>
                <li><a href="#">公司扣员工工资做募捐， 有爱心还是被捐赠？</a></li>
                <li><a href="#">托关系入学反被骗为何频频发生？</a></li>
            </ul>
        </div>
        <!--hot部分-->
        <div class="hot">
            <h4>热门精选</h4>
            <!--图片以及文字部分-->
            <div class="img clearfix">
                <a href="#"><img src="images/img_05.jpg"/></a>
                <h5><a href="#">日常脸部清洁护理上妆正确顺序是？</a></h5>
                <p>脸部化妆正确步骤如下：①基础护理：洁面——爽肤水——润肤露：说到化妆，最首先的当然是要先清洁面部了，如果有黑头...</p>
            </div>
            <ul>
                <li><a href="#">葡萄汁染在衣服上了要怎么洗 ？</a></li>
                <li><a href="#">什么是邮件营销？</a></li>
                <li><a href="#">考银行必须要有银行从业资格证吗？</a></li>
                <li><a href="#">移动联通电信4g和移动4g有什么区别？</a></li>
                <li><a href="#">如何用photoshop做gif</a></li>
                <li><a href="#">出口退税流程是什么？</a></li>
            </ul>
        </div>

        <!--public部分-->
        <div class="public">
            <!--公告部分-->
            <h4>公告</h4>
            <ul>
                <li><a href="#">【招募】知道日报开放作者申</a></li>
                <li><a href="#">【真相问答机】，揭穿流言！</a></li>
                <li><a href="#">知道非遗集合页上线啦！</a></li>
                <li><a href="#">知道多世界新栏目上线！</a></li>
                <li><a href="#">问咖App：诚邀爱分享能约见的</a></li>
            </ul>
            <!--小标题部分-->
            <h4 class="shopTitle">商城兑换</h4>
            <a href="#"><img src="images/img_06.jpg"/></a>
        </div>
    </div>
</section>
<!--second第二部分-->
<section id="second" class="clearfix">
    <!--内容区域居中-->
    <div class="center">
        <!--第一部分问题部分-->
        <div class="ask">
            <!--标题部分-->
            <div class="title">
                <h3>大家都在问</h3>
                <strong>57607</strong>
                <span>名用户都在答题</span>
            </div>
            <!--问题部分的上边-->
            <div class="box">
                <div class="bTitle clearfix">
                    <span>每日一题</span>
                    <a href="#"></a>
                    <strong>200</strong>
                </div>
                <!--问题部分的内容-->
                <p><a href="#">有一首老的歌曲，高胜美，韩宝仪她们那个时期的。女的唱的，欢快。有一句好像是给我一</a></p>
                <!--按钮部分-->
                <div class="btn"><a href="#">立即抢答</a></div>
            </div>
        </div>
        <!--列表项目-->
        <div class="list">
            <div class="more"><a href="#">更多</a></div>
            <ul>
                <li><strong>3 分钟前</strong><span><a href="#">电子账户的钱怎么转到银行卡 </a></span></li>
                <li><strong>3 分钟前</strong><span><a href="#">如何提取原版镜像中的installESD.dmg文件</a></span></li>
                <li><strong>3 分钟前</strong><span><a href="#">Win10用什么杀毒软件</a></span></li>
                <li><strong>3 分钟前</strong><span><a href="#">假啤酒拿货，那里有的进货？ </a></span></li>
                <li><strong>3 分钟前</strong><span class="noborder"><a href="#">宝宝用安抚奶嘴好吗</a></span></li>
            </ul>
        </div>
        <!--图片部分-->
        <div class="img">
            <a href="#"><img class="marignBottom" src="images/img_07.jpg" alt=""></a>
            <a href="#"><img src="images/img_08.jpg" alt=""></a>
        </div>
    </div>
</section>
<!--知道用户区域-->
<section id="user" class="clearfix">
    <!--居中区域-->
    <div class="center">
        <!--用户头像区域-->
        <div class="userImg">
            <!--标题-->
            <h3>知道用户</h3>
            <!--用户图片列表-->
            <ul>
                <li class="fist">
                    <div class="top">
                        <h4>芝麻</h4>
                        <p>在百度知道中所有贡献知识的用户</p>
                        <a href="#"><img src="images/photo_01.jpg"/></a>
                        <a href="#">卢召843297658</a>
                    </div>
                    <div class="bottom">
                        <p>已有<span style="color:#ee5e0f;">8,662,298</span>个芝麻</p>
                        <a href="#">我要答题</a>
                    </div>
                </li>
                <li class="second">
                    <div class="top">
                        <h4>芝麻团</h4>
                        <p>由有共同专长、共同兴趣的芝麻组成的团队</p>
                        <a href="#"><img src="images/photo_02.jpg"/></a>
                        <a href="#">数学辅导团</a>
                    </div>
                    <div class="bottom">
                        <p class="info">已有<span style="color:#ee5e0f;">13,450</span>个芝麻团</p>
                        <a href="#">加入团队</a>
                    </div>
                </li>
                <li class="third">
                    <div class="top">
                        <h4>芝麻将</h4>
                        <p>由热心用户组成，官方直接领导的平台管理团队</p>
                        <a href="#"><img src="images/photo_03.jpg"/></a>
                        <a href="#">chengbaowai</a>
                    </div>
                    <div class="bottom">
                        <p class="info">已有<span style="color:#ee5e0f;">6,512</span>个芝麻将</p>
                        <a href="#">申请芝麻将</a>
                    </div>
                </li>
            </ul>
        </div>
        <!--用户排行榜-->
        <div class="rank">
            <!--顶部图片-->
            <a href="#"><img src="images/img_09.jpg"/></a>
            <!--排行榜标题-->
            <div class="title clearfix">
                <h4>排行榜</h4>
                <div>
                    <span class="caina">周采纳</span>
                    <span>周积分</span>
                </div>
            </div>
            <!--列表项-->
            <ul>
                <li><a href="#">19855260at</a><span class="color">3509</span><img src="images/ico_11.gif"/></li>
                <li><a href="#">ljh2355</a><span class="color">2423</span><img src="images/ico_12.gif"/></li>
                <li><a href="#">p20202021</a><span class="color">2160</span><img src="images/ico_12.gif"/></li>
                <li><a href="#">zsk95</a><span>2081</span><img src="images/ico_12.gif"/></li>
                <li><a href="#">紫色云恒星</a><span>2039</span><img src="images/ico_11.gif"/></li>
                <li><a href="#">亦寒杰</a><span>2024</span><img src="images/ico_11.gif"/></li>
                <li><a href="#">U盾998</a><span>1851</span><img src="images/ico_11.gif"/></li>
                <li><a href="#">A山巅之最</a><span>1827</span><img src="images/ico_11.gif"/></li>
            </ul>
        </div>
    </div>
</section>
<!--知道行家区域-->
<section id="expert" class="clearfix">
    <!--居中处理-->
    <div class="center">
        <!--左边区域-->
        <div class="left clearfix">
            <!--标题区域-->
            <div class="title clearfix">
                <!--左边标题-->
                <div class="Ltitle">
                    <h3>知道行家</h3><span>13</span>个领域<span>11，114</span>个行家
                </div>
                <!--右面标题-->
                <div class="Rtitle">
                    <a href=""><span class="change">换一换</span></a>
                    <a href=""><span>更多</span></a>
                </div>
            </div>
            <!--列表项-->
            <ul class="clearfix">
                <li style="margin-right: 21px;">
                    <p><a href="#">如何在Excel多个单元格内一次性输入同样的内容？</a></p>
                    <div>
                        <a href="#" class="photo"><img src="images/photo_04.jpg"></a>
                        <a href="#" class="userName">鱼木混猪</a>
                        <span>擅长领域：软件应用</span>
                    </div>
                </li>
                <li>
                    <p><a href="#">苹果iPhone6怎么批量删除全部通讯录联系人？</a></p>
                    <div>
                        <a href="#" class="photo"><img src="images/photo_05.jpg"></a>
                        <a href="#" class="userName">RB小凉伴</a>
                        <span>擅长领域：数码</span>
                    </div>
                </li>
            </ul>
        </div>
        <!--右面区域-->
        <div class="right">
            <!--标题区域-->
            <div class="title clearfix">
                <h3>拇指医生</h3>
                <a href="#">更多</a>
            </div>
            <ul>
                <li><a href="#">帮我看下严重么？是什么意思？</a></li>
                <li><a href="#">用气能道法能保胎么？</a></li>
                <li><a href="#">老人长期鼻饲瑞素营养液会引起腹泻吗</a></li>
                <li><a href="#">怀孕7个月了，这几天起床刚下床，下面会流</a></li>
                <li><a href="#">看看张单什么意思？显示偏左了</a></li>
                <li><a href="#">脑袋被撞，拍CT没事，现在伸懒腰头晕的厉害</a></li>
                <li style="margin-bottom: 0;"><a href="#">卵磷脂小体48白细胞17-20尿无力，早泄，请问怎么治</a></li>
            </ul>
        </div>
    </div>
</section>
<!--轮播滑块区域-->
<section id="slider" class="clearfix">
    <div class="center">
        <!--左滑块-->
        <div class="LeftBtn"></div>
        <!--中间分类部分-->
        <div class="classify clearfix">
            <div>
                <h3 class="bg1"><a href="#">经济金融</a></h3>
                <ul>
                    <li><a href="#">经济</a></li>
                    <li><a href="#">银行</a></li>
                    <li><a href="#">基金</a></li>
                    <li><a href="#">金融</a></li>
                    <li><a href="#">证券</a></li>
                    <li><a href="#">黄金</a></li>
                    <li><a href="#">外汇</a></li>
                    <li><a href="#">期货</a></li>
                </ul>
            </div>
            <div>
                <h3 class="bg2"><a href="#">企业管理</a></h3>
                <ul>
                    <li><a href="#">企业管理</a></li>
                    <li><a href="#">人力资源</a></li>
                    <li><a href="#">市场营销</a></li>
                    <li><a href="#">创业</a></li>
                    <li><a href="#">融资</a></li>
                </ul>
            </div>
            <div>
                <h3 class="bg3"><a href="#">法律法规</a></h3>
                <ul>
                    <li><a href="#">法律</a></li>
                    <li><a href="#">婚姻继承</a></li>
                    <li><a href="#">劳动人事</a></li>
                    <li><a href="#">交通事故</a></li>
                    <li><a href="#">医疗纠纷</a></li>
                    <li><a href="#">财产房产</a></li>
                    <li><a href="#">知识产权</a></li>
                    <li><a href="#">权益维护</a></li>
                </ul>
            </div>
            <div>
                <h3 class="bg4"><a href="#">社会民生</a></h3>
                <ul>
                    <li><a href="#">军事</a></li>
                    <li><a href="#">宗教</a></li>
                    <li><a href="#">时事政治</a></li>
                    <li><a href="#">办公</a></li>
                    <li><a href="#">职业</a></li>
                </ul>
            </div>
        </div>
        <!--右滑块-->
        <div class="RightBtn"></div>
    </div>
</section>
<!--侧边栏区域-->
<section id="subNav" class="clearfix">
    <div class="center">
        <div>
            <h3 class="bg1"><a href="#">新手帮助</a></h3>
            <ul>
                <li><a href="#">如何答题</a></li>
                <li><a href="#">获取采纳</a></li>
                <li><a href="#">使用财富值</a></li>
            </ul>
        </div>
        <div class="bg2">
            <h3><a href="#">玩法介绍</a></h3>
            <ul>
                <li><a href="#">知道商城</a></li>
                <li><a href="#">知道团队</a></li>
                <li><a href="#">行家认证</a></li>
            </ul>
        </div>
        <div>
            <h3 class="bg3"><a href="#">投诉建议</a></h3>
            <ul>
                <li><a href="#">举报不良信息</a></li>
                <li><a href="#">意见反馈</a></li>
                <li><a href="#">投诉侵权信息</a></li>
            </ul>
        </div>
    </div>
</section>
<footer>
    <div class="center">
        &copy;Baidu<a href="#">使用百度前必读</a> | <a href="#">知道协议</a> | <a href="#">百度知道品牌合作</a>
    </div>
</footer>
</body>
</html>